<template>
	<view class="shop-content f-color">
		<view class="shop-title" v-for="item,index in shopList.data" :key="item.name" @tap="changTab(index)">
			<view :class="index===shopList.currentIndex?'f-active-color':''">{{item.name}}</view>
			<view class="icons">
				<view :class="item.status===1?'f-active-color':''" class="iconfont icon-shangjiantou"></view>
				<view :class="item.status===2?'f-active-color':''" class="iconfont icon-xiajiantou"></view>
			</view>
		</view>
	</view>
	<commonLine></commonLine>
		<scroll-view scroll-y :style="{height:contentHeight+'px'}" @scrolltolower="addDataList">
			<view>
				<commomDity v-if="dataList.length!==0" :dataList="dataList" bigH="620rpx"></commomDity>
				<view class="no-keyword f-color" v-else>
					<view>
						抱歉，没有找到相关商品
					</view>
					<view>
						请改变搜索条件重新尝试搜索
					</view>
				</view>
			</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onReady
	} from '@dcloudio/uni-app';
	const emit = defineEmits(['changTab','addData'])
	const props = defineProps({
		dataList: Array,
		shopList: Object
	})
	const contentHeight = ref('')
	const changTab = (i) => {
		emit('changTab', i)
	}
	const initPageHeight = () => {
		const res = uni.getSystemInfoSync();
		contentHeight.value = res.windowHeight-uni.upx2px(80)
	}
	const addDataList=()=>{
		emit('addData')
	}
	onMounted(() => {
		initPageHeight()
	})
</script>

<style lang="scss" scoped>
	.shop-content {
		display: flex;
		justify-content: center;
		.shop-title {
			flex: 1;
			display: flex;
			justify-content: center;

			.icons {
				position: relative;
				margin-left: 10rpx;

				view {
					width: 16rpx;
					height: 8rpx;
					position: absolute;
					left: 0;
				}

				view:nth-child(1) {
					top: -10rpx;
				}

				view:nth-child(2) {
					top: 0rpx;
				}
			}
		}
	}

	.no-keyword {
		text-align: center;
		font-size: 32rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
